import React, { useState } from 'react'
import '../scss/DueRemind.scss'
import { Descriptions, Checkbox, Mentions, Radio,Button,DatePicker,notification  } from 'antd';

export default function DueRemind2(props) {

  // const plainOptions = ['Apple', 'Pear', 'Orange'];

  const [plainOptions, setplainOptions] = useState(['系统推送', '短信', '邮件'])
  const [plainOption, setplainOption] = useState([])
  const [template, settemplate] = useState('')
  const [value, setvalue] = useState(1)
  const [value2, setvalue2] = useState(0)
  const [inpvalue, setinpvalue] = useState('')

  const onChange = (checkedValues) => {
    // console.log('checked = ', checkedValues);
    setplainOption(checkedValues)
  }

  const onChange2 = (e) => {
    // console.log(e);
    settemplate(e)
  }

  const onChange3 = (e) => {
    setvalue(e.target.value);
  }

  const onChange4 = (e) => {
    setvalue2(e.target.value);
  }

  const onChange5 = (e) => {
    setinpvalue(e._d);
  }

  const submint = (type) => {

    notification[type]({
      message: '即将到期提醒',
      duration:2.5,
      description:
        '操作成功！',
    });

    console.log(plainOption);
    console.log(template);
    console.log(value);
    if( value2 === 0 ){
      console.log(value2);
    }else{
      console.log(value2);
      console.log(inpvalue);
    }

    setTimeout(() => {
      props.history.goBack()
    }, 2500);
  }

  const back = ()=>{
    props.history.goBack()
  }

  return (
    <div className="dueremind">
      {/* <div className="dueremind-title">
        即将到期提醒(客户 【{props.location.name}】)
      </div> */}
      <Descriptions bordered>
        <Descriptions.Item label="通知方式：" span={3}>
          <Checkbox.Group options={plainOptions} defaultValue={['']} onChange={onChange} />
        </Descriptions.Item>
        <Descriptions.Item label="使用模板：" span={3}>
          <Mentions rows={3} placeholder="模板：即将到期模板提醒" onChange={onChange2} />
        </Descriptions.Item>
        <Descriptions.Item label="提醒周期：" span={3}>
          <Radio.Group onChange={onChange3} value={value} >
            <Radio value={1}>一次</Radio>
            <Radio value={2}>到期前每天一次</Radio>
          </Radio.Group>
        </Descriptions.Item>
        <Descriptions.Item label="发生时间：" span={3}>
          <Radio.Group onChange={onChange4} value={value2} >
            <Radio value={0}>立即发送;</Radio>
            <Radio value={1}>定时发送: <DatePicker picker={'time'} onChange={onChange5} disabled={!value2} className="dueremind-input" placeholder="请输入指定时间"/></Radio>
          </Radio.Group>
        </Descriptions.Item>
      </Descriptions>

      <div className="dueremind-btn">
        <Button onClick={back}>取消</Button>
        <Button type="primary" onClick={()=>submint('success')}>确定</Button>
      </div>

    </div>

  )
}
